<template>
	<view class="m-2">
		<view class="bg-white p-2">
			<view class="d-flex flex-row flex-nowrap j-sb" style="width:670upx;height:80upx;line-height:80upx;border-bottom:2px solid #2878ff;font-size:30upx;">
				
				<view  class="d-flex flex-row flex-nowrap" style="width: 360upx;text-align: center;line-height: 80upx;">
					<view>模拟试卷解析</view>
				</view>
				
				<view class="d-flex flex-row flex-nowrap j-end" style="width:100upx;padding-right:20upx;" @click="showAnswerCard">
					<image src="../../static/icon/abcd.png" style="width:40upx;height: 40upx;margin-top:20upx;margin-left:10upx;"></image>
				</view>
			</view>
			<view style="height: 80upx;line-height: 80upx;">
				<view style="font-weight: bold;font-size:32upx;"> {{ currentChapterName }}  {{ questionSubIndexShow }}</view>
			</view>
			
			<swiper class="swiper" style="height: 850upx;" :current="currentIndex" @change="questionChange" >
				<swiper-item v-for="(item,index) in questionList" :key="'q' + item.id">
					<scroll-view scroll-y="true" style="height: 850upx;">
						<view style="width:670upx;font-size:32upx;">
							<!-- 选择题 -->
							<view >
								<view class="mt-2">
									<text>
										<rich-text v-html="item.title" ></rich-text>
									</text>
								</view>
								<view v-for="(sitem,sindex) in item.questionOptions" :key="sitem.id" class="d-flex flex-row flex-wrap mt-2 option_con"
									:style=" 'background-color:' + ( (currentOptionId && currentOptionId.indexOf(sitem.id) != -1) ? '#019ef8' : '#f2f2f2') + ';color:' + ( (currentOptionId && currentOptionId.indexOf(sitem.id) != -1) ? '#ffffff' : '#000000')+ ';'"  >
									
									<view class="option_no">
										<text>{{ sitem.letter }}</text>
									</view>
									<view class="d-flex flex-row flex-wrap py-1 pr-1" style="width:590upx;">
										<text>
											<rich-text v-html="sitem.optionContent" ></rich-text>
										</text>
									</view>
								</view>
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			
			<!--
			<view class="mt-2 d-flex flex-row flex-nowrap" >
				<view style="width: 310upx;">
					<button class="view_btn" @click="showAnalysis" >{{ this.showAnswerAnslysis ? "隐藏" : "查看" }}解析</button>
				</view>
			</view>
			-->
			
			<view class="mt-1" v-show="showAnswerAnslysis">
				<view class="w-50 pr-2" style="line-height: 80upx;">
					<text v-if="!isRight">未作答</text>
					<text v-if="isRight == '1'" style="font-weight: bold;color: #007e00;">回答正确</text>
					<text v-if="isRight == '0'" style="font-weight: bold;color: #ff0000;">回答错误</text>
				</view>
				<view style="color: #245eb4;font-weight: bold;">
					您的答案： {{ staffAnswer }}
				</view>
				<view style="color: #007e00;font-weight: bold;">
					标准答案： {{ standardAnswer }}
				</view>
				<view>
					解析： {{ analysis }}
				</view>
			</view>
			
			<view class="d-flex flex-row flex-nowrap j-sb mt-1">
				<view class="w-50 pr-2">
					<button :class="this.currentIndex > 0 ? 'pre_next_enable_btn' : 'pre_next_disabled_btn' "   @click="preview">上一题</button>
				</view>
				<view class="w-50 pl-2">
					<button :class=" this.currentIndex < this.questionList.length - 1 ? 'pre_next_enable_btn' : 'pre_next_disabled_btn' "  @click="next">下一题</button>
				</view>
			</view>
		</view>
		
		<answer_card v-show="showCard" style="width:670upx;position: absolute; top:120upx;left:40upx;" :chapterList = "chapterList" 
			:currentIndex="currentIndex"  @selectEvent="handleSelect"  ></answer_card>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				nowTime: '00:56:23',
				// 显示答题卡
				showCard: false,
				// 提交标识（提交后又回退到考试页面跳转首页）
				submitFlag: "0",
				// 当前正在进行的专题id
				answerPaperId: '',
				paperName: 'xxxx试卷名称',
				// 考生ID
				staffId: '',
				// 模拟试卷ID
				paperId: '',
				
				// 当前大题
				currentChapterName: '',
				
				questionList: [],
				// 当前试题编号索引
				currentIndex: 0,
				// 当前刷题进度
				questionSubIndexShow: '',
				// 答题卡
				chapterList: [],
				// 选中的答案
				currentOptionId: '',
				
				// 标题答案和解析
				showAnswerAnslysis: true,
				standardAnswer: '',
				staffAnswer: '',
				isRight: '',
				analysis: '',
				
				// 当前试题是否收藏
				favoriteFlag: false,
				
				// 最后答题序号
				endIndex: 0,
				
				// 1  试卷解析  2 错题解析
				type: '',
			}
		},
		
		onShow() {
			// 如果已经提交试卷，跳转首页
			if(this.submitFlag == "1"){
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		},
		
		onLoad(option) {
			this.answerPaperId = option.examId
			this.staffId = option.staffId
			this.paperId = option.paperId
			
			this.type = option.type
			this.getSimulateData()
			
			
			let title = '错题解析'
			if (option.type == '1') {
				title = "试卷解析"
			}
			uni.setNavigationBarTitle({
				title: title
			});
		},
		
		methods: {
			
			// 查询模拟试卷信息
			getSimulateData(){
				
				let url = '/moni/getSumilatePaperQuestion'
				if(this.type == '2'){
					url = '/moni/getSumilatePaperErrorQuestion'
				}
				let param = {id: this.answerPaperId, staffId: this.staffId, paperId: this.paperId}
				
				this.$H.post(url, param, {token: true}).then(res=>{					
					if(!res || res.code != 200){
						return uni.showToast({
							title: '获取数据失败'
						})
					}
					uni.hideLoading()
					this.questionList = res.result.questionList
					this.chapterList = res.result.chapterList
					
					
					// 处理当前进行到第几题
					this.endIndex = res.result.endIndex
					
					
					// 直接跳转到上次刷题的进度
					this.currentIndex = (this.endIndex && this.endIndex < this.questionList.length - 1) ? this.endIndex : 0
					
					// 当时刷题序号进度
					let question = this.questionList[this.currentIndex]
					this.questionSubIndexShow = question.questionSubIndexShow
					
					// 显示标题答案和解析
					this.standardAnswer = question.standardAnswer ? question.standardAnswer.replace(/,/g, '') : '' 
					this.analysis = question.analysis
					
					let chapterId = question.chapterId
					let chapter = this.chapterList.filter(item=> item.id == chapterId)[0]
					
					// 当前大题
					this.currentChapterName = chapter.title
					
					// 收藏标记
					let currentAnswer = chapter.answerList.filter(item=> item.questionId == question.id)[0]
					this.favoriteFlag = currentAnswer.favoriteFlag
					
					// 当前试题的答案显示
					this.currentOptionId = currentAnswer.staffAnswerId
					
					// 考生答案
					this.staffAnswer = (currentAnswer && currentAnswer.staffAnswer) ? currentAnswer.staffAnswer.replace(/,/g, '') : ''
					this.isRight = currentAnswer.isRight
				}).catch( err =>{
					if(err.msg){
						uni.showToast({
							title: err.msg,
							icon: 'none'
						})
					}
					uni.hideLoading()
				})
			},
			
			// 试题切换
			questionChange(event){
				this.currentIndex = event.detail.current
				
				this.statusSwip()
			},
			// 定位试题
			handleSelect(param){
				let questionId = param.questionId
				let index = param.index
				
				// 定位到试题
				this.currentIndex = index
				
				this.statusSwip()
				
				// 切换试题后隐藏答题卡
				this.showCard = false
			},
			
			// 显示或隐藏答题卡
			showAnswerCard(){
				this.showCard = !this.showCard
			},
			
			
			// 下一题
			next(){
				if(this.currentIndex < this.questionList.length - 1){
					++this.currentIndex;
					this.statusSwip()
				}
			},
			// 上一题
			preview(){
				if(this.currentIndex > 0){
					--this.currentIndex
					this.statusSwip()
				}
			},
			
			// 切换试题数据状态变更 
			statusSwip(){
				
				// 当时刷题序号进度
				let question = this.questionList[this.currentIndex]
				
				// 显示标题答案和解析
				this.standardAnswer = question.standardAnswer ? question.standardAnswer.replace(/,/g, '') : '' 
				
				
				
				this.analysis = question.analysis
				
				// 初始化当前试题的收藏
				let chapterId = question.chapterId
				let chapter = this.chapterList.filter(item=> item.id == chapterId)[0]
				
				// 当前大题
				this.currentChapterName = chapter.title
				
				let currentAnswer = chapter.answerList.filter(item=> item.questionId == question.id)[0]
				
				// 前端试题的考生答案显示
				this.currentOptionId = currentAnswer.staffAnswerId
				// 考生答案
				this.staffAnswer = (currentAnswer && currentAnswer.staffAnswer) ? currentAnswer.staffAnswer.replace(/,/g, '') : ''
				this.isRight = currentAnswer.isRight
				
				// 收藏状态
				this.favoriteFlag = currentAnswer.favoriteFlag
				
				// 当时刷题进度
				this.questionSubIndexShow = question.questionSubIndexShow
				
			},
			
			
			
			
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #f1f1f1;
	}
	
	.option_con{
		background-color: #f2f2f2;
	}
	
	.option_con_selected{
		background-color: #c5dcf2;
	}
	
	.option_no{
		width:50upx;margin-left:20upx;padding-top:10upx;
	}
	
	.pre_next_enable_btn{
		height:70upx;line-height: 70upx; border-radius: 35upx;font-size:28upx;background-color: #2878ff; color:#ffffff;
	}
	
	.pre_next_disabled_btn{
		height:70upx;line-height: 70upx; border-radius: 35upx;font-size:28upx;background-color: #d6d6d6;
	}
	
	.view_btn{
		height:70upx;line-height: 70upx; border-radius:35upx;color:#ffffff;background-color: #2878ff;font-size:28upx;
		width: 300upx; 
	}
	
</style>
